import { useState, useEffect, useRef } from "react";
import "./index.scss";
const App = () => {
  const arr = [0,1,2,3,4]
  const swiper = useRef();
  const [count, setCount] = useState(1);
  const [el, setEl] = useState({
    swiper: null,
    list: null,
  });
  const time = null;

  //轮播的自动执行函数
  const run = () => {
    time = setInterval(() => {}, 1000);
  };
  //页面初始化
  useEffect(() => {
    const inner = swiper.current;
    const list = inner.children;
    // console.log(inner,list)
    const w = inner.offsetWidth;
    setEl({
      list:Array.from(list),
      swiper:inner
    })
    inner.style.width = inner.offsetWidth * list.length + "px";
    Array.from(list).forEach((item) => {
      item.style.width = w + "px";
    });
    // console.log(inner.offsetWidth)
  }, []);
  return (
    <div className="swiper">
      <div className="box">
        <ul className="inner" ref={swiper}>
          {
            arr.map((item,index)=>{
              return <li key={index}>{item}</li>
            })
          }
        </ul>
      </div>
    </div>
  );
};

export default App;
